As i understand you cant actually hide a scrollbar and make it still scroll anymore. Thats fine, but i see many many profiles that still have the scrollbar hidden and i cant for the life of me figure out HOW they do this. Several of the spotlight winners have 'hidden' scrollbars and as i do not want to steal anyone's coding, id like to know how this is done without risking having to dig thru someone elses page source and get in trouble! If anyone can help me or direct me to the right place, that would be amazing.

I am aware that there are javascript solutions to this, but i do not know java at all so i'd really like a CSS/HTML solution to this. I also found a small webkit coding that could possibly work but i dont think thats what everyone else is using.

You can see my issue here when you hover over his story to read it.

Thanks!

i think the only way to do it is to use a coverup image, but i don't like those because they don't just cover the scrollbar, they cover part of the text as well and make the story obnoxious to read.

[edit] i suppose you could create a custom scrollbar and set its width to 0:

::-webkit-scrollbar { width: 0px; }

::-webkit-scrollbar-thumb { border-radius: 0px; -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0); }

to the rescue again! lol. Thanks! Ill try that out and see what happens :)

It's not true that the scrollbar covers cover part of the text. Those things just cover the scrollbar itself. If all profiles from other coders look that way to you you might want to check if your browser is up to date or you are using some kind of browser where you can have a different scrollbar because otherwise it works in firefox and chrome perfectly. I haven't checked other browsers because I only have those two. The other solution you suggested does not work in firefox because a) the webkit prefix only changes things for webkit browsers and firefox is not one of those and b) there's no firefox equivalent to that. I don't think javascript works here either though, at least I've never seen it used so far I think.

well on my computer, the scrollbar is invisible unless being used, which means when it appears, it appears on top of the far right edge of the content. and it doesn't matter which browser i use, it's the same for safari, chrome, and firefox. so for example:

when not scrolling:

when scrolling:

so if you cover the scrollbar, you cover part of the text. it's not a matter of an out-of-date browser; it's always been like that, and it's like that for all browsers. and anyway, firefox is shit and doesn't display profiles correctly 80% of the time, so…

i do have to say that yesterdays spotlight winner used this method of adding a img cover to their scrollbar and it seems to work fine. Does not seem to make the text look messed up at all. It's possible that the scrollbar in which your talking about is set to hidden regularly, and auto on hover. It seems like you could fix this by just making it auto all the time so it is visible and doesnt screw with your text on hover, ive noticed Zandiers profile does that upon hover, it doesnt actually cover any text but the text does smash right up against it. I could probably add padding to the DIV and remedy this though. Again, im a noob with coding, so i could have things a bit wrong.

i didnt know that webkit only worked on firefox, is this the case with transitioning webkit codes as well? i didnt think it was since so many people have them on their profile, i mean i use a few on Zandiers and they seem to work fine on my laptop and PC, though i use firefox with both, but nobody else has said that my transitions dont work for them.

Wow, okay, that's weird. What kind of computer are you using if I may ask? I've never seen that xD A friend of mine had a problem like that with the text being covered but it was fixed by updating her browser. It's also kind of unusual that your scrollbar just goes over the text because it normally doesn't. And you really never have a scrollbar unless you scroll? Because on Frosix' profile the scrollbar only appears on hover. The issue could theoretically be solved by a right padding but since it would have to be at least the width of the scrollbar it would look weird to pretty much everyone else..

It works on those profiles because you defined the transition in more than one way so the different browser take what they need^^ Like this from your code: transition: width 1s ease-in-out; -webkit-transition: width 1s ease-in-out; There are other prefixes apart from webkit for different types of browsers, I'd suggest reading up on that in case you want to make sure your profile works in literally every browser.

ok, that makes sense. so the first 'webkit transition' is the one defining firefox and the 'transition' is another seperate defining transition and this is what probably causes it to work in a different browser, correct me if im wrong but im pretty sure i get it. i will read up more on transitioning, i usually use W3 website, but sometimes they dont totally explain things clearly. i dont really understand their format for telling you which browsers works with whatever codes, its a bit confusing for me because its usually just a table with a list of browsers and some numbers lol.

yes, and this is what it looks like to me when people use scrollbar covers:

i use a macbook, OS 10.8.5, which is the most recent OS before yosemite (and i refuse to update to yosemite because i don't like how it looks and i heard it messes up a lot of stuff like tablet compatibility). but this isn't a matter of an out-of-date browser or OS, because it's literally been like that since the day i got this laptop (probably because it has a built-in trackpad scrolling functionality). no scrollbar ever, until i actually start scrolling with the trackpad, and if i then hover over the scrollbar it expands so i can click and drag it to scroll the old-fashioned way.

thats super interesting. and good to know that maybe Apple Laptop users have a hard time with scrollbars, i may just leave mine the way it is then. It does kind of sound like its due to your trackpad scrolling, is assume this doesnt happen with peoples layouts who dont hide the scrollbar at all?

no, as you can see on the first example, when the scrollbar is left as is, there's no issue - everything is visible when i'm not scrolling, so i can read what i need to, scroll a bit, let the scrollbar disappear again, and continue reading. that's why i've never felt the need to hide or edit the scrollbar - it's invisible when not in use, and even when it is in use it's very neutral and visually unobtrusive.

ok cool, thanks! Learn something new every day :)

Hm.. that's interesting. I definitely understand how that is an annoying problem for you. You could try to always have the scrollbar showing like explained here though I don't know if that fixes the problem.. Even though I work in IT support I'm no good with macs, lol.

Almost, the webkit defines it for chrome and safari and other webkit based browsers. It also always takes the last working value, so if put the webkit definition before the prefixless definition it will use the 'transition' and not the '-webkit-transition' then unless the browser only knows the webkit version like safari does.

i just tested it out, and it does fix the problem, but tbh i think i prefer it when the scrollbar is automatically hidden - having an ugly white bar at the side of the screen at all times is just annoying.